<template>
  <div class="admin">
    <div class="admin-top">
      <div class="top-left">
        <div class="img">
          <img class="img" src="/static/img/admin.svg" alt="">
        </div>
        <div class="name">
          <p>{{Cookie.get('username')}}</p>
        </div>
      </div>
      <div class="top-right" @click="gologin">
        <p>退出登录</p>
      </div>

    </div>
        <router-view/>
  </div>

</template>

<script setup>
import { h , ref, onMounted} from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import router from '@/router'
import Cookie from 'js-cookie'
import store from 'vuex'


// let img = computed(() => userStore.mapState.adminimg)
// const img = store.state.adminimg
// onMounted ((res) =>{
//   const user = Cookie.get('username')
//   axios.get('/api/username?username='+ user).then(res =>{
//     list.adminmsg = res.data
//     console.log(list.adminmsg);
//   })
// })


function gologin () {
  axios.get('/api/logout').then(ref => {
    Cookie.remove('username')
    Cookie.remove('userrole')
  }).then(res => {
    router.push('/login')
    ElMessage({
      message: h('p', null, [
        h('span', null, '已成功退出登录'),
        h('i', { style: 'color: teal' }, 'VNode')
      ])
    })
  })
}

</script>

<style scoped lang="scss">
.on {
  background-color: #0099CC;
}

.admin {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;

  .admin-top {
    height: 100px;
    width: 100%;
    border-bottom: 1px solid #CCCCCC;
    padding: 0 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #0099CC;
    color: white;
  }

  .top-left {
    height: 100px;
    display: flex;
    align-items: center;

    .img {
      width: 80px;
      height: 80px;
    }

    .name {
      margin: 0 10px;
      padding: 5px 20px;
      font-size: 24px;
      border-bottom: 1px solid #CCCCCC;
    }
  }

  .top-right {
    margin: 0 20px;
    cursor: pointer;
  }
}

</style>
